<template>
	<view class="indexContent">
		<!-- Logo搜索栏 -->
		<view class="searchNav">
			<image src="../../static/images/logo.png" class="searchNavLogo"></image>
			<view class="search">
				<view class="iconfont icon-sousuo"></view>	
				<input 
				class="searchInput" 
				placeholder="搜索商品" 
				placeholder-class
				/>
			</view>
			<button class="userName">小菜鸡</button>
		</view>
		<scroll-view 
		class="scrollNav" 
		scroll-x 
		v-if="homeData.kingKongModule"
		>
			<view 
			:class="{scrollItem:true, active:currentIndex === -1}"
			@tap="currentIndex = -1"
			>推荐</view>
			<view 
			:class="{scrollItem:true,active:currentIndex === index}" 
			v-for="(kingKongItem,index) in homeData.kingKongModule.kingKongList"
			:key="kingKongItem.L1Id"
			@click="handleChangeNavIndex(index)"
			>
			{{kingKongItem.text}}
			</view>
		</scroll-view>
		<scroll-view scroll-y class="scrollMain">
			<Recommend v-if="currentIndex === -1"></Recommend>
			<CateList v-else :navIndex="currentIndex"></CateList>
		</scroll-view>
	</view>
</template>

<script>
	import {mapActions,mapState} from "vuex"
	import Recommend from "../../components/Recommend/recommend.vue"
	import CateList from "../../components/CateList/CateList.vue"
	
	export default {
		data() {
			return {
				// 首页数据
				homeData:{},
				// 选中的导航栏便签下标
				currentIndex:-1
			}
		},
		components:{
			Recommend,
			CateList
		},
		async created() {
			await this.reqGetIndexData("/getIndexData")
			this.homeData = this.indexData
		},
		computed:{
			...mapState("home",["indexData"])
		},
		onLoad() {
		},
		methods: {
			...mapActions("home",["reqGetIndexData"]),
			// 点击切换导航栏标签选中序号
			handleChangeNavIndex(index){
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="stylus" scoped>
// index容器
.indexContent
	// Logo搜索栏开始
	.searchNav
		display flex
		justify-content space-between
		align-items center
		padding 20upx 20upx 0 20upx
		// 搜索栏Logo
		.searchNavLogo 
			flex-shrink 0
			margin-right 20upx
			height 40upx
			width 118upx
		// 搜索栏输入框
		.search
			flex-grow 1
			display flex
			justify-content flex-start
			align-items center
			padding 0 20upx
			height 60upx
			background #FFC0CB
			border-radius 10upx
			.icon-sousuo
				flex-shrink 0
				margin-right 10upx
			.searchInput
				flex-grow 1
				box-sizing border-box
				height 40upx
				line-height 40upx
				font-size 24upx
				// text-indent 48upx
				// 输入框默认文本样式设置，scoped时类名前需要加/deep/
				/deep/.input-placeholder
					text-align center		
		// 用户按钮
		.userName 
			flex-shrink 0
			margin-left 20upx
			width 140upx
			height 60upx
			line-height 60upx
			font-size 24upx
			color red
	// Logo搜索栏结束
	// 导航栏开始
	.scrollNav
		white-space nowrap
		// &::-webkit-scrollbar
		// 	display none
		.scrollItem 
			display inline-block
			width 140upx
			height 80upx
			line-height 80upx
			text-align center
			font-size 28upx
			&.active
				border-bottom 4upx solid red
	// 导航栏结束
	// 主体内容开始
	// 在浏览器h5端，100vh是整个屏幕的高度，而在微信小程序中，100vh是
	// 除了顶部navBar和底部tabbar之外的屏幕高度
	.scrollMain
	/* #ifdef MP-WEIXIN */
		height calc(100vh - 80upx - 84upx )
	/* #endif */
	/* #ifdef H5 */
		// height calc(100vh - 80upx - 84upx - 100upx - 88upx)
		height calc(100vh - 80upx - 84upx - var(--window-top) - var(--window-bottom))
	/* #endif */
		// height calc(100%vh - )
		// height calc(100vh - 80upx - 84upx )
	// 主体内容结束
</style>
